<script setup>
import {computed, reactive} from "vue";

//对象数据
let car = reactive({
  brand: "奔驰",
  price: 777,
  num: 3,
  coupon: 2
})

//获取优惠
function getCoupon() {
  //一张优惠卷50元
  car.price -= (car.coupon * 50)
}

//加量
function addNum() {
  car.num++
}

//加价
function changePrice() {
  car.price += 10;
}

//计算总价
const totalPrice = computed(() => {
  return car.price * car.num - car.coupon * 100
})
</script>

<template>
  <h2>computed-计算属性</h2>

  <div class="car">
    <h2>优惠券：{{ car.coupon }} 张</h2>
    <h2>数量：{{ car.num }}</h2>
    <h2>单价：{{ car.price }}</h2>
    <h1>总价：{{ totalPrice }}</h1>
    <button @click="getCoupon">获取优惠</button>
    <button @click="addNum">加量</button>
    <button @click="changePrice">加价</button>
  </div>
</template>

<style scoped>
</style>